<template>
  <div class="img-webpack">
    <h3>打包img时小图片使用base64格式</h3>
    <div class="img-webpack-imgs">
        <div v-for="item in list" :key="item.name" class="iwi-item">
            <img :src="item.src" :alt="item.name">
            <div>{{ item.name }}</div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ImgWebpack',
  data() {
    return {
      list: [],
    }
  },
  created() {
    const imgs = [
        '2.webp',
        'ai.webp',
        'document.webp',
        'location.webp',
        'safe.webp',
        '21.png',
        '22.png',
        '23.jpg'
    ]
    // console.log(require(`@/static/imgs/2.webp`));
    this.list = imgs.map(name => {
        return {
            name: name.split('.')[0],
            // src: () => import(`@/static/imgs/${name}.webp`)
            src: require(`@/static/imgs/${name}`)
        }
    })
    window.requestIdleCallback(() => {
      console.log('requestIdleCallback');
    })
  },
}
</script>
<style lang="scss" scoped>
.img-webpack {
    .img-webpack-imgs {
        display: flex;
        flex-wrap: wrap;
        column-gap: 20px;
        .iwi-item {
            width: 100px;
            img {
                width: 100%;
                height: 100px;
            }
            &>div {
                text-align: center;
            }
        }
    }
}
</style>
